<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Stewart Allen">
    <meta name="keywords" content="3d slicer,chromebook,slicer,3d slicing,cnc,cam,toolpaths,toolpath generation,kiri,kirimoto,kiri:moto,gcode,cura,simplify 3d,prusaslicer,fdm,sla">
    <meta name="copyright" content="stewart allen [sa@grid.space]">
    <meta name="description" content="Browser-based 3D slicer, gcode and CNC toolpath generator">
    <meta property="og:description" content="Kiri:Moto is a unique 3D slicer that runs entirely in browser and creates output for your favorite maker tools: 3D Printers, CNC Mills and Laser Cutters.">
    <meta property="og:title" content="Browser-based 3D Slicer">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://grid.space/kiri/">
    <meta property="og:image" content="https://static.grid.space/img/logo_km_og.png">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta http-equiv="origin-trial" content="AqowoIyLrJdKrT7wgV7OtFshD8JyLU2i6Y9FN+2z4ftYXDUUTAlEkJmaRAZKZP0Lmy+GoJRoWxL3Mo6FkUOLOQAAAAB0eyJvcmlnaW4iOiJodHRwczovL2dyaWQuc3BhY2U6NDQzIiwiZmVhdHVyZSI6IlVucmVzdHJpY3RlZFNoYXJlZEFycmF5QnVmZmVyIiwiZXhwaXJ5IjoxNzE5MzU5OTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Kiri:Moto</title>
    <link rel="icon" href="/kiri/favicon.ico">
    <link rel="apple-touch-icon" href="/kiri/favicon-mobile.png">
    <link rel="stylesheet" type="text/css" href="/kiri/index.css?{{version}}">
    <link href="/font/css/all.min.css" rel="stylesheet">
    <link href="/kiri/manifest.json" rel="manifest">
    <script src="/code/cache.js?{{version}}" defer></script>
    <script src="/font/js/all.min.js" crossorigin="anonymous" defer></script>
    <script src="/code/kiri.js?{{version}}"></script>
</head>
<body>
<div id="app" class="f-col">
    <!-- hide page contents and provide loading message during initialization -->
    <div id="curtain" class="j-center a-center"><img id="loading">Kiri:Moto is Loading</div>

    <!-- when running iframed, provide a separator between the menu bar and enclosing page -->
    <div id="top-sep"></div>

    <!-- top menu bar -->
    <div id="top" class="f-row">
        <div class="f-row top-menu">
            <span id="view-arrange">
                <span><i class="fas fa-shapes"></i></span>
                <label lk="arrange">arrange</label>
            </span>
            <span id="act-slice">
                <span><i class="fas fa-bars"></i></span>
                <label id="label-slice" title="generate layer slices" lk="slice">preview</label>
            </span>
            <span id="act-preview">
                <span><i class="fas fa-layer-group"></i></span>
                <label id="label-preview" title="show routing and paths" lk="preview">preview</label>
            </span>
            <span id="act-animate">
                <span><i class="fas fa-film"></i></span>
                <label id="label-animate" title="render routing on a mesh" lk="animate">animate</label>
            </span>
            <span id="act-export">
                <span><i class="fas fa-file-download"></i></span>
                <label id="label-export" title="generate gcode" lk="export">export</label>
            </span>
        </div>
        <div class="grow"></div>
        <div id="app-name" class="f-col a-center top-menu">
            <span class="grow">
                <span class="km-font">Kiri:Moto</span>
                <div id="app-name-pop" class="top-menu-drop top-menu-center">
                    <div class="content">
                        <div id="app-help">
                            <label lk="help">help</label>
                        </div>
                        <hr width="100%">
                        <div>
                            <label id="app-info">version</label>
                        </div>
                    </div>
                </div>
            </span>
        </div>
        <div id="doit" class="f-row a-center">
            <button id="undo"><i class="fas fa-undo-alt"></i></button>
            <button id="redo"><i class="fas fa-redo-alt"></i></button>
        </div>
        <div class="grow"></div>
        <div class="f-row top-menu">
            <span>
                <i class="fas fa-folder"></i>
                <label>files</label>
                <div class="top-menu-drop top-menu-right">
                    <div class="content">
                        <div id="file-recent">
                            <label lk="recent">recent</label>
                            <span><i class="fas fa-list"></i></span>
                        </div>
                        <div id="file-import">
                            <label lk="import">import</label>
                            <span><i class="fas fa-file-upload"></i></span>
                            <!-- required file input loader -->
                            <input id="load-file" type="file" name="loadme" style="display:none"></input>
                        </div>
                        <hr>
                        <div id="app-export">
                            <label lk="export">export</label>
                            <span><i class="fas fa-download"></i></span>
                        </div>
                    </div>
                </div>
            </span>
            <span>
                <i class="fas fa-eye"></i>
                <label>view</label>
                <div class="top-menu-drop top-menu-right">
                    <div class="content">
                        <div id="view-home">
                            <label lk="home">home</label>
                            <span><i class="fas fa-home"></i></span>
                        </div>
                        <hr>
                        <div id="view-top">
                            <label lk="top">top</label>
                            <span><i class="fas fa-square"></i></span>
                        </div>
                        <div id="view-front">
                            <label lk="front">top</label>
                            <span><i class="fas fa-square"></i></span>
                        </div>
                        <div id="view-back">
                            <label lk="back">top</label>
                            <span><i class="fas fa-square"></i></span>
                        </div>
                        <div id="view-left">
                            <label lk="left">top</label>
                            <span><i class="fas fa-square"></i></span>
                        </div>
                        <div id="view-right">
                            <label lk="right">top</label>
                            <span><i class="fas fa-square"></i></span>
                        </div>
                        <hr>
                        <div id="app-xpnd">
                            <label lk="fullscreen">fullscreen</label>
                            <span><i class="fas fa-maximize"></i></span>
                        </div>
                    </div>
                </div>
            </span>
            <span>
                <i class="fas fa-code-branch"></i>
                <label>mode</label>
                <div class="top-menu-drop top-menu-right">
                    <div class="content">
                        <div id="mode-fdm">
                            <label>FDM</label>
                            <span><i class="fas fa-layer-group"></i></span>
                        </div>
                        <div id="mode-cam">
                            <label>CNC</label>
                            <span><i class="fas fa-bore-hole"></i></span>
                        </div>
                        <div id="mode-laser">
                            <label>Laser</label>
                            <span><i class="fas fa-bolt"></i></span>
                        </div>
                        <div id="mode-sla">
                            <label>SLA</label>
                            <span><i class="fas fa-cube"></i></span>
                        </div>
                    </div>
                </div>
            </span>
            <span>
                <i class="fas fa-cog"></i>
                <label>setup</label>
                <div class="top-menu-drop top-menu-right">
                    <div class="content">
                        <div id="set-device">
                            <label lk="machine">machine</label>
                            <span><i class="fas fa-cube"></i></span>
                        </div>
                        <div id="set-profs">
                            <label lk="profs">profiles</label>
                            <span><i class="fas fa-sliders-h"></i></span>
                        </div>
                        <div id="set-tools">
                            <label lk="tools">tools</label>
                            <span><i class="fas fa-tools"></i></span>
                        </div>
                        <div id="app-lang">
                            <label lk="language">language</label>
                            <span><i class="fas fa-language"></i></span>
                            <div id="lang-pop">
                                <span id="lang-hold"></span>
                                <div id="lset-zh">简体中文</div>
                                <div id="lset-da">dansk</div>
                                <div id="lset-de">deutsch</div>
                                <div id="lset-en">english</div>
                                <div id="lset-es">español</div>
                                <div id="lset-fr">français</div>
                                <div id="lset-pl">polskie</div>
                                <div id="lset-pt">português</div>
                            </div>
                        </div>
                        <div id="set-prefs">
                            <label lk="prefs">prefs</label>
                            <span><i class="fa-solid fa-square-check"></i></span>
                        </div>
                    </div>
                </div>
            </span>
        </div>
    </div>

    <!-- line betwwen menu bar and main application windows -->
    <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>

    <div id="mid" class="grow f-row">

        <!-- left settings menu -->
        <div id="panel-left" class="f-col j-left">
            <!-- always up -->
            <div id="mode-info">
                <div><label>Device</label><span id="mode-device"></span></div>
                <div><label>Profile</label><span id="mode-profile"></span></div>
            </div>
            <div class="line-sep2"></div>
            <div class="f-col grow settings">
                <!-- FDM -->
                <div id="fdm-layers" class="set2-group mode-fdm"></div>
                <div id="fdm-walls" class="set2-group mode-fdm"></div>
                <div id="fdm-fill" class="set2-group mode-fdm"></div>
                <div id="fdm-heat" class="set2-group mode-fdm"></div>
                <div id="fdm-cool" class="set2-group mode-fdm"></div>
                <div id="fdm-base" class="set2-group mode-fdm"></div>
                <div id="fdm-support" class="set2-group mode-fdm"></div>
                <div id="fdm-output" class="set2-group mode-fdm"></div>
                <div id="fdm-expert" class="set2-group mode-fdm"></div>
                <!-- CAM -->
                <div id="cam-tabs" class="set2-group mode-cam"></div>
                <div id="cam-stock" class="set2-group mode-cam"></div>
                <div id="cam-limits" class="set2-group mode-cam"></div>
                <div id="cam-output" class="set2-group mode-cam"></div>
                <div id="cam-origin" class="set2-group mode-cam"></div>
                <div id="cam-expert" class="set2-group mode-cam"></div>
                <!-- LASER -->
                <div id="lzr-slice" class="set2-group mode-laser"></div>
                <div id="lzr-layout" class="set2-group mode-laser"></div>
                <div id="lzr-knife" class="set2-group mode-laser"></div>
                <div id="lzr-output" class="set2-group mode-laser"></div>
                <!-- SLA -->
                <div id="sla-slice" class="set2-group mode-sla"></div>
                <div id="sla-layers" class="set2-group mode-sla"></div>
                <div id="sla-base" class="set2-group mode-sla"></div>
                <div id="sla-fill" class="set2-group mode-sla"></div>
                <div id="sla-support" class="set2-group mode-sla"></div>
                <div id="sla-output" class="set2-group mode-sla"></div>
            </div>
            <div class="line-sep2"></div>
            <div class="chonk"></div>
        </div>

        <!-- main workspace -->
        <div id="mid-mid" class="grow">
            <div id="layer-slider" class="f-col a-stretch">
                <div id="layers" class="f-row j-center"></div>
                <div id="slider" class="f-row russo">
                    <div id="slider-zero">0</div>
                    <div id="slider-center" class="grow">
                        <div id="slider-hold" class="f-row">
                            <div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
                            <div id="slider-mid">&nbsp;</div>
                            <div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
                        </div>
                    </div>
                    <div id="slider-max">&infin;</div>
                </div>
            </div>
        </div>

        <!-- allows right tray to slide/hide but still show speeds menu -->
        <div class="f-row j-center">
            <div id="set-menu" class="f-col">
                <div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div>
            </div>
            <!-- vertical separation between workspace and right tray -->
            <div id="panel-right" class="f-col j-start settings">
                <div class="set2-group f-col">
                    <div class="set-header"><a>mesh tools</a></div>
                    <div class="render-tools">
                        <span id="tool-rotate"><i class="fas fa-sync-alt" title="rotate"></i></span>
                        <span id="tool-scale"><i class="fas fa-expand" title="scale"></i></span>
                        <span id="tool-mesh"><i class="fas fa-dice-d20" title="mesh tool"></i></span>
                        <span id="context-mirror" xlk="rc_mirr"><i class="fas fa-arrows-left-right-to-line" title="mirror"></i></span>
                        <span id="context-duplicate" xlk="rc_dupl"><i class="fas fa-copy" title="duplicate"></i></span>
                        <span id="context-layflat" xlk="rc_lafl"><i class="fas fa-arrows-down-to-line" title="lay flat"></i></span>
                        <span id="render-solid" class="j-center" title="view solid"><i class="fas fa-square"></i></span>
                        <span id="render-wire" class="j-center" title="view wireframe"><i class="fas fa-border-all"></i></span>
                        <span id="render-ghost" class="a-center" title="view transparent"><i class="fas fa-border-none"></i></span>
                    </div>
                </div>
                <div class="set2-group f-col">
                    <div class="set-header"><a>objects</a></div>
                    <div id="ws-widgets" class="f-col"></div>
                </div>
                <div class="set2-group f-col mode-fdm">
                    <div class="set-header"><a>ranges</a></div>
                    <div id="fdm-ranges" class="f-col"></div>
                </div>
                <div class="set2-group f-col mode-cam">
                    <div class="set-header mode-cam"><a>operation list</a></div>
                    <div id="camops" class="f-col a-stretch grow">
                        <div id="oplist" class="f-col j-center"></div>
                        <div id="op-add" class="opdiv">
                            <i class="fas fa-plus"></i>
                            <div id="op-add-pop" class="f-col">
                                <div id="op-add-list" class="opdiv op-grid">
                                    <div id="cam-index" title="rotate index axis">index</div>
                                    <div id="cam-lathe" title="lathe operation">lathe</div>
                                    <div id="laser-on" title="turn on laser mode">laser on</div>
                                    <div id="laser-off"  title="turn off laser mode">laser off</div>
                                    <div id="cam-flip" title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
                                    <div id="cam-reg" title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
                                    <div title="drill any holes matching&#13;selected tool diameter">drill</div>
                                    <div title="clear stock face&#13;or top of part&#13;when no stock">level</div>
                                    <div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
                                    <div title="insert custom gcode">gcode</div>
                                    <div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div>
                                    <div title="clean up after roughing&#13;or perform a part cutout">outline</div>
                                    <div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div>
                                    <div title="clear areas above&#13;selected surfaces">pocket</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grow"></div>
                <div class="line-sep2"></div>
                <div class="chonk"></div>
            </div>
        </div>
    </div>

    <!-- ThreeJS container -->
    <div id="container"></div>

    <!-- modal dialogs-->
    <div id="modal">
        <div id="modal-box" class="f-col">

        <!-- title bar and closer -->
        <div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>

        <!-- help menu -->
        <div id="mod-help" class="mdialog f-col">
            <div class="f-row j-center title">
                <label>Kiri:Moto Help</label>
            </div>
            <div class="f-col">
                <a target="_rsc" href="https://docs.grid.space/projects/kiri-moto"><i class="fas fa-question-circle"></i>Kiri:Moto Full Documentation</a>
                <a href="https://youtu.be/08795Sj22QE" target="youtube"><i class="fab fa-youtube"></i>Video Guide to Kiri:Moto 2.5</a>
                <a target="_rsc" href="https://www.youtube.com/c/GridSpace/videos"><i class="fab fa-youtube"></i>YouTube Channel</a>
                <a target="_rsc" href="https://discord.gg/suyCCgr"><i class="fab fa-discord"></i> Discord Live Chat</a>
                <a target="_rsc" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Discourse Forums</a>
                <a target="_rsc" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow on Twitter</a>
                <a target="_rsc" href="https://paypal.me/gridspace3d?locale.x=en_US"><i class="fab fa-paypal"></i> Donations are welcome!</a>
            </div>
            <div class="f-row j-center">
                <label id="kiri-version"></label>
            </div>
        </div>

        <!-- device selector / editor -->
        <div id="mod-setup" class="mdialog f-row">
            <div class="f-col left a-stretch">
                <div id="dev-header" class="header sub f-col j-center">
                    <label lk="dm_stdd">standard devices</label>
                    <div id="dev-search">
                        <i class="fas fa-search"></i>
                        <input id="dev-filter">
                    </div>
                </div>
                <div class="f-col mh0 mh35 j-center a-stretch">
                    <div id="device-list" class="devlist f-col overy"></div>
                </div>
                <label class="header sub" lk="dm_mydd">my devices</label>
                <div class="f-col grow">
                    <div id="device-my" class="devlist f-col grow overy"></div>
                    <div class="f-row footer">
                        <div class="grow"></div>
                        <button id="device-add" lk="copy">copy</button>
                        <button id="device-del" lk="delete">delete</button>
                        <button id="device-exp" lk="export">export</button>
                        <div class="grow"></div>
                    </div>
                </div>
            </div>
            <div class="f-col grow a-stretch">
                <label class="header" lk="dm_seld">selected device</label>
                <div class="f-row">
                    <div id="device1" class="f-col t-body t-inset overy grow"></div>
                    <div class="t-pad"></div>
                    <div id="device2" class="f-col t-body t-inset overy grow"></div>
                    <div id="palette3" class="f-col t-body t-inset overy grow"></div>
                </div>
                <div class="t-pad"></div>
                <div id="gcode-edit" class="f-col grow">
                    <div id="dg" class="f-col t-body t-inset"></div>
                    <div class="t-pad"></div>
                    <div id="dev-gcode" class="grow"></div>
                </div>
                <div id="device-action" class="f-row footer">
                    <div class="grow"></div>
                    <button id="device-save" lk="save">save</button>
                    <div class="grow"></div>
                </div>
            </div>
        </div>

        <!-- recent file menu -->
        <div id="mod-files" class="mdialog f-col">
            <label class="set-header menu-title" lk="dm_rcnt">recent files</label>
            <div id="catalogList" class="f-col"></div>
        </div>

        <!-- settings list and editor -->
        <div id="mod-saves" class="mdialog f-col">
            <label class="set-header menu-title" lk="dm_savs">saved settings</label>
            <div id="settingsList" class="f-col"></div>
            <div id="settingsNew">
                <input id="settingsName" class="grow"></input>
                <button id="settingsSave" lk="save">Save</button>
            </div>
        </div>

        <!-- cnc tool menu -->
        <div id="mod-tools" class="mdialog">
            <div class="f-col">
                <div class="f-row t-head">
                    <label class="t-33" lk="tool">tool</label>
                    <div class="t-pad"></div>
                    <label class="t-33" lk="detail">detail</label>
                    <div class="t-pad"></div>
                    <label class="t-33" lk="view">view</label>
                </div>
                <div id="tool-cols" class="f-row">
                    <div class="f-col t-33">
                        <select id="tool-select" size="10" class="grow"></select>
                    </div>
                    <div class="t-pad"></div>
                    <div class="f-col t-33 t-body t-inset">
                        <div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
                        <div class="f-row var-row"><label lk="type">type</label>
                            <select id="tool-type">
                                <option value="endmill" lk="td_tyem" selected>end</option>
                                <option value="ballmill" lk="td_tybm">ball</option>
                                <option value="tapermill" lk="td_tytm">taper</option>
                            </select>
                        </div>
                        <div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
                        <div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
                        <div class="set-header f-col" lk="td_shft">shaft</div>
                        <div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
                        <div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
                        <div class="set-header f-col" lk="td_flut">flute</div>
                        <div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
                        <div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
                        <div class="set-header f-col" ln="td_tapr">taper</div>
                        <div class="f-row var-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=7></input></div>
                        <div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
                    </div>
                    <div class="t-pad"></div>
                    <div id="tool-view" class="f-col t-33 t-body"></div>
                </div>
                <div id="tool-action" class="f-row j-center">
                    <button id="tool-add"><i class="fas fa-plus"></i></button>
                    <button id="tool-del"><i class="fas fa-minus"></i></button>
                    <div class="t-pad2"></div>
                    <button id="tools-save" lk="save">save</button>
                    <button id="tools-close" lk="done">done</button>
                    <div class="t-pad2"></div>
                    <button id="tools-export" lk="export">export</button>
                </div>
            </div>
        </div>

        <!-- system preferences -->
        <div id="mod-prefs" class="mdialog f-col a-center">
            <label lk="dm_appp" class="menu-title">Application Preferences</label>
            <hr width="80%">
            <div class="f-row">
                <div id="prefs-gen1" class="f-col"></div>
                <div class="t-pad2"></div>
                <div id="prefs-gen2" class="f-col"></div>
                <div class="t-pad2"></div>
                <div id="prefs-lay" class="f-col"></div>
                <div class="t-pad2"></div>
                <div id="prefs-xpo" class="f-col"></div>
                <div class="t-pad2"></div>
                <div id="prefs-prt" class="f-col"></div>
                <div class="t-pad2"></div>
                <div id="prefs-add" class="f-col"></div>
                <div class="t-pad2"></div>
            </div>
        </div>

        <!-- grid local list -->
        <div id="mod-local" class="mdialog f-col"></div>
        <div id="mod-print" class="mdialog f-col"></div>
        <div id="mod-any" class="mdialog f-col"></div>
        <div class="mod-end"></div></div>
    </div>

    <!-- click + drag mouse tracking  -->
    <div id="tracker"></div>

    <!-- EU compliance -->
    <div id="gdpr" class="noshow">
        <p>this site uses <A href="/privacy.html" target="privacy">cookies</a> to preserve application preferences</p>
        <button id="gotit" class="f-col j-center">got it</button>
    </div>

    <!-- right click pop-up menu -->
    <div id="context-menu">
        <button id="context-export-workspace" lk="rc_xpws">export workspace</button>
        <button id="context-clear-workspace" lk="rc_clws">clear workspace</button>
        <div class="sep"></div>
        <button id="context-setfocus" lk="rc_focs">set focus</button>
    </div>

    <!-- developer debugging -->
    <div id="stats">
        <div id="rms"></div>
        <div id="fps"></div>
        <div id="rnfo"></div>
    </div>

    <!-- CAM animation controls and readout -->
    <div id="layer-animate" class="f-col a-center"></div>
    <div id="layer-toolpos" class="f-row a-center"></div>

    <!-- ephemeral non-modal alerts -->
    <div id="alert-area">
        <div id="alert-border">
            <div id="alert-text">alerts<br>alerts<br>alerts</div>
        </div>
    </div>

    <!-- slice/preview layer slider -->
    <div id="top-slider" class="f-col grow">
        <input id="anim-slider" type="range" min="0" max="1000" value="0"></input>
    </div>

    <!-- movable tool tray for mesh tools -->
    <div id="float-tools" class="f-col movable hide">
        <div id="float-tools-title" class="title mover">
            <label id="ft-label" class="grow">title bar</label>
            <div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
        </div>
        <div class="body f-row">
            <div class="f-col menu">
                <div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div>
                <div lkt="scale" class="tictac" select="ft-scale" label="ft-label"><i class="fas fa-expand"></i></div>
                <div lkt="mesh" class="tictac" select="ft-mesh" label="ft-label"><i class="fas fa-dice-d20"></i></div>
            </div>
            <div id="ft-scale" class="grow grid">
                <div><label class="middle">X</label><input id="lock_x" type="checkbox" checked></div>
                <div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked></div>
                <div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked></div>
                <div><label id="lab-axis" lk="axis">axis</label></div>
                <div><input id="size_x" size="8" class="value"></div>
                <div><input id="size_y" size="8" class="value"></div>
                <div><input id="size_z" size="8" class="value"></div>
                <div><label id="lab-size" lk="size">size</label></div>
                <div><input id="scale_x" size="8" class="value" value="1"></div>
                <div><input id="scale_y" size="8" class="value" value="1"></div>
                <div><input id="scale_z" size="8" class="value" value="1"></div>
                <div><label id="lab-scale" lk="scale">scale</label></div>
                <button id="scale-reset" class="gr4">reset</button>
            </div>
            <div id="ft-rotate" class="grow grid">
                <div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
                <label>X</label>
                <div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
                <input id="rot_x" class="value center" size="6" value="0">
                <div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
                <label>Y</label>
                <div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
                <input id="rot_y" class="value center" size="6" value="0">
                <div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
                <label>Z</label>
                <div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
                <input id="rot_z" class="value center" size="6" value="0">
                <div class="buttons f-row">
                    <button id="lay-flat" class="grow">lay flat</button>
                    <button id="unrotate" class="grow" lk="reset">reset</button>
                </div>
            </div>
            <div id="ft-mesh" class="grow f-col">
                <div id="mesh-info" class="grid">
                    <label>object:</label>
                    <span id="mesh-name" class="value">[0]</span>
                    <label>points:</label>
                    <span id="mesh-points" class="value">-</span>
                    <label>faces:</label>
                    <span id="mesh-faces" class="value">-</span>
                </div>
                <button id="mesh-export-obj" lk="rc_xobj">export OBJ</button>
                <button id="mesh-export-stl" lk="rc_xstl">export STL</button>
                <button id="mesh-swap" lk="rc_swap">replace vertices</button>
            </div>
        </div>
        <div class="footer"></div>
    </div>

</div>
</body>
</html>
